<script setup lang="ts">
defineOptions({
  name: "AppModelManage"
});

import {
  ref,
  onMounted,
  inject,
  watch,
  watchEffect,
  defineOptions,
  computed
} from "vue";
import { FormInstance, FormRules } from "element-plus";
import axios from "axios";
import { info } from "console";
import { InfoContainer } from "../components";
import { bitUrlApi } from "../../../api/utils";
// defineOptions({
//   name:'model_manage_knowledge'
// })
// 表格数据接口
interface TableData {
  name?: string; // 模型名称
  model_apply?: string; // 应用领域
  model_perform?: number; // 模型性能
  model_size?: string; // 模型大小
  light_item?: boolean; // 是否量化
  transfer_item?: boolean; //是否迁移
}

// 打开添加/编辑
const dialogFormVisible = ref(false);
const dialogFormTitle = ref("新增");
// 详情
const detailDrawer = ref(false);

const add = () => {
  dialogFormTitle.value = "新增";
  dialogFormVisible.value = true;
};

const onSearch = () => {};

const handleSizeChange = (val: number) => {
  console.log(val);
};
const handleCurrentChange = (val: number) => {
  console.log(val);
};

function openDialog(item: any) {
  if (item) {
    dialogFormTitle.value = "修改";
  }
  dialogFormVisible.value = true;
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const tableData = ref<TableData[]>([]);
const tabel_content = ref(null);

const ReleaseConfirm = item => {
  console.log(item, "用户点击了发布确认按钮");
};

const ReleaseCancel = () => {
  console.log("用户点击了发布取消按钮");
};

const DeleteConfirm = async item => {
  try {
    const res = await axios.post(bitUrlApi("/manage/model_delete"), {
      name: item.name
    });
    console.log(res);
    await fetchData();
  } catch (error) {
    console.error("获取数据时出错:", error);
  }
  console.log(item.name, "用户点击了删除确认按钮");
};

const DeleteCancel = async () => {
  console.log("用户点击了删除取消按钮");
};

const fetchData = async () => {
  try {
    const res = await axios.post(bitUrlApi("/manage/model_table"), {
      model_class: "knowledge"
    });
    console.log("所有的模型：", res);
    tabel_content.value = res.data.data.models;
    console.log("tabel,", tabel_content.value[0]);
    for (let i = 0; i < tabel_content.value.length; i++) {
      if (tabel_content.value[i].model_apply == "outlier_detection") {
        tabel_content.value[i].model_apply = "工业异常检测";
      } else if (tabel_content.value[i].model_apply == "fault_diagnosis") {
        tabel_content.value[i].model_apply = "工业故障诊断";
      }

      if (tabel_content.value[i].is_light == false) {
        tabel_content.value[i].is_light = "否";
      } else if (tabel_content.value[i].is_light == true) {
        tabel_content.value[i].is_light = "是";
      }

      if (tabel_content.value[i].is_transfer == false) {
        tabel_content.value[i].is_transfer = "否";
      } else if (tabel_content.value[i].is_transfer == true) {
        tabel_content.value[i].is_transfer = "是";
      }

      tableData.value.push({
        name: tabel_content.value[i].model_name,
        model_apply: tabel_content.value[i].model_apply,
        model_perform: tabel_content.value[i].model_perform,
        model_size: tabel_content.value[i].model_size,
        light_item: tabel_content.value[i].is_light,
        transfer_item: tabel_content.value[i].is_transfer
      });
    }
  } catch (error) {
    console.error("获取数据时出错:", error);
  }
};

onMounted(fetchData);

const totalItems = ref(1);
const currentPage = ref(1);
const pageSize = ref(10);

watch(tableData, newValue => {
  totalItems.value = newValue.length;
  // console.log(newValue.length)
});

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});

// 分页
// const pagesOptions = ref<Pages>({
//   total: totalItems.value,
//   currentPage: currentPage.value,
//   pageSize: pageSize.value,
//   disabled: false
// });
// console.log(totalItems.value)

watchEffect(() => {
  console.log("tableData 发生变化:", tabel_content);
  // 在这里执行表格内容变化时的操作，例如更新表格或者其他逻辑
  if (tabel_content.value) {
    tableData.value = [];
    for (let i = 0; i < tabel_content.value.length; i++) {
      tableData.value.push({
        name: tabel_content.value[i].model_name,
        model_apply: tabel_content.value[i].model_apply,
        model_perform: tabel_content.value[i].model_perform,
        model_size: tabel_content.value[i].model_size,
        light_item: tabel_content.value[i].is_light,
        transfer_item: tabel_content.value[i].is_transfer
      });
    }
  }
});
</script>

<template>
  <InfoContainer>
    <div class="bg-bg_color py-[20px] px-[20px] rounded-[10px]">
      <el-row :gutter="20" style="padding-bottom: 0">
        <el-col :span="4">
          <div class="ve-card" style="color: black">
            <div>
              <p style="font-size: 16px; font-weight: bold">工业知识模型</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 添加分隔线 -->
      <el-divider />

      <el-table
        class="my-[20px]"
        :data="currentPageData"
        table-layout="auto"
        border
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--an-regular-text-color)',
          'font-weight': '400'
        }"
      >
        <el-table-column prop="name" label="模型名称" />
        <el-table-column prop="model_apply" label="应用领域" />
        <el-table-column prop="model_perform" label="模型性能" />
        <el-table-column prop="model_size" label="模型大小" />
        <el-table-column prop="light_item" label="是否量化" />
        <el-table-column prop="transfer_item" label="是否迁移" />
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="scope">
            <el-popconfirm
              title="确认发布？"
              style="width: 100px"
              @confirm="ReleaseConfirm(scope.row)"
              @cancel="ReleaseCancel"
            >
              <template #reference>
                <el-button link type="primary" size="small">发布</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              title="确认删除"
              @confirm="DeleteConfirm(scope.row)"
              @cancel="DeleteCancel"
            >
              <template #reference>
                <el-button link type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        class="flex justify-end"
        :total="totalItems"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :disabled="false"
        background
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </InfoContainer>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
